import React, { useCallback, useEffect, useState } from "react";
import useBtnAuth from "../../hooks/useBtnAuth";
import http from "../../utils/http";
import TableList from "./componets/TableList";
import SearchForm from "./componets/SearchForm";
import FormSubmit from "./componets/FormSubmit";
import { Form, Modal, Button } from "antd";
import '@ant-design/v5-patch-for-react-19';
function LayoutHome() {
  const isDel = useBtnAuth("delete");
  const isQuery = useBtnAuth("query");
  const isEdit = useBtnAuth("edit");
  const isAdd = useBtnAuth("add");
  //分页
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [pageSize, setPageSize] = useState(5);
  const [page, setPage] = useState(1);
  //搜索
  const [job, setJob] = useState("");
  const [status, setStatus] = useState("");
  const [start_time, setStart_time] = useState("");
  const [end_time, setEnd_time] = useState("");
  const [name, setName] = useState("");

  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState("");
  const [form] = Form.useForm();

  const getList = async () => {
    setLoading(true);

    // job, name, schema_name, status, type, start_time, end_time, pageSize, pageNum
    const res = await http.get("/getSchemaList", {
      params: {
        pageSize: pageSize,
        pageNum: page,
        job,
        status,
        start_time,
        end_time,
        name,
      },
    });
    const { code, list, total } = res.data;
    if (code === 1) {
      setList(list);
      setTotal(total);
    }
    setLoading(false);
  };

  useEffect(() => {
    getList();
  }, [page, pageSize, job, status, start_time, end_time, name]);

  const onChange = useCallback((page, pageSize) => {
    setPage(page);
    setPageSize(pageSize);
  }, []);

  const onSearch = useCallback((values) => {
    setPage(1);

    setJob(values.job);
    setStatus(values.status);
    setStart_time(values.start_time);
    setEnd_time(values.end_time);
    setName(values.name);
  }, []);

  const editBtnFN = (record) => {
    setOpen(true);
    setTitle("编辑");
    form.setFieldsValue(record);
  };

  const delFn = async (record) => {
    Modal.confirm({
      title: "是否删除？",
      onOk: async () => {
        const res = await http.delete("/delSchema", {
          params: { id: record.id },
        });
        const { code } = res.data;
        if (code === 1) {
          getList();
        }
      },
    });
  };

  const sbumitFN = async (values) => {
    if (values.id) {
      const res = await http.put("/editSchema", values);
      const { code } = res.data;
      if (code === 1) {
        getList();
        closeFn(); // 提交完成,关闭弹框
      }
    } else {
      const res = await http.post("/addSchema", values);
      const { code } = res.data;
      if (code === 1) {
        getList();
        closeFn();
      }
    }
  };

  const closeFn = () => {
    setOpen(false);
    form.resetFields();
  };

  return (
    <div>
      {isQuery && <SearchForm onSearch={onSearch} />}
      {isAdd && (
        <Button
          onClick={() => {
            setOpen(true);
            setTitle("添加");
          }}
        >
          添加
        </Button>
      )}
      <TableList
        list={list}
        loading={loading}
        total={total}
        pageSize={pageSize}
        page={page}
        onChange={onChange}
        isEdit={isEdit}
        editBtnFN={editBtnFN}
        isDel={isDel}
        delFn={delFn}
      />
      <FormSubmit
        title={title}
        open={open}
        form={form}
        sbumitFN={sbumitFN}
        closeFn={closeFn}
      />
    </div>
  );
}

export default LayoutHome;
